<template>
    <div class="virtual-list" v-if="name === data.value">
        <div class="container" ref="container" :style="`max-height:${container.chat_height}px`" @mouseleave="hideRight()" @scroll="showDataList()">
<!--            <ul class="ivu-mt-16" ref="p_li" :style="`height:${li.height * data.child.length}px;`">-->
            <ul class="ivu-mt-16" ref="p_li">
                <li :style="`height:${li.height}px`" v-for="item of showList" :key="item.id" @click="selectFriend(item)" @contextmenu.prevent="rightEvent(item)" :id="item.friendid">
                    <Row align="middle" class="ivu-mb-16" style="display: flex ;justify-content: space-between;">
                        <Col v-width="200" style="display: flex" >

                        <Badge v-if="source === 1" class="demo-badge avatar"  overflow-count="1000" :count="item.unread_cnt ? parseInt(item.unread_cnt) : 0">
                            <img class="avatar" v-lazy="item.avatar || baseImg" />
                        </Badge>
                        <img class="avatar" v-else v-lazy="item.avatar || baseImg" />

                        <div class="ivu-ml-8">
                            <span :class="(source === 1 ? currentFriend.friendid === item.friendid : active === item.id) ? 'active' : null">
                                <Ellipsis :text="source === 1 ? item.show_name : (item.remark_name || item.nickname)" :length="18" full-width-recognition></Ellipsis>
                            </span>
                        </div>
                        </Col>
                        <Col v-if="showRepair">
                        <Icon class=" icon " :class="data.total > 5 ? 'ivu-ml-16' : 'ivu-ml-8'" @click.stop="$emit('clickup', item), (active = item.id)" type="md-sync" color="#19be6b" size="18"></Icon>
                        </Col>
                    </Row>
                </li>
            </ul>

            <!-- 右键弹框 -->
            <div v-show="source === 1 && showRight" id="rightEvents" :ref="'rightEvents_'+data.value">
                <div class="del-tab" @click="setTopChat">{{ data.top_type === 1 ? '置顶' : '取消置顶' }}</div>
                <!-- <div @click="setTop()" v-text="topTip"></div> -->
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';

    export default {
        // source 1微聊、0其他
        props: ['data', 'name', 'showRepair', 'source'],
        data() {
            return {
                baseImg:require('@/assets/images/avater.png'),
                li: {
                    // 列表项信息
                    height: 50,
                },
                container: {
                    // 容器信息
                    // height: 310,
                    chat_height: 300,
                },
                pos: 1, // 第一排显示的元素的下标
                MAX_NUM: 1, // 在容器内最多显示几个列表项
                timer: null, // 定时器
                carriedOut: true, // 能不能执行操作
                active: '',
                showRight: false,
                selectItem: {},
                page: 1,
                pageSize: 10,
            };
        },
        mounted() {

        },
        computed: {
            ...mapState('chatwebsocket/wechat', [
                'currentFriend',
            ]),
            // 用于渲染在页面上的数组
            showList() {
                let list = this.data.child;
                let pos = (this.page - 1) * this.pageSize;
                // let startPos = pos - this.pageSize < 0 ? 0 : pos - this.pageSize;

                // 根据计算出来的 第一排元素的下标,和最多显示多少个  用slice实现截取数组
                return list.slice(0, pos + this.pageSize * 2);
            },
        },
        methods: {
            showDataList() {
                // 获取 overflow:scroll 的元素已滚动的高度
                let scrollTop = this.$refs.container.scrollTop;
                let offsetHeight = this.$refs.container.offsetHeight;
                // 内容高度
                let scrollHeight = this.$refs.container.scrollHeight;

                if (scrollHeight - scrollTop <= 400) {
                    if (this.page * this.pageSize < this.data.child.length) {
                        this.page++;
                    }
                }
            },
            // 右击菜单
            rightEvent(item) {
                // 非微聊，无法右击, top_type 0取消置顶、1置顶、2两个操作都不显示
                if (this.source !== 1 || this.data.top_type === 2) return;

                this.showRight = false;
                this.selectItem = item;
                // 计算右键菜单显示高度
                let e = document.getElementById(item.friendid);
                this.$refs['rightEvents_' + this.data.value].style.top = e.offsetTop - this.$refs['container'].scrollTop + e.offsetHeight / 2 + 'px';
                this.$refs['rightEvents_' + this.data.value].style.left = e.offsetWidth / 2 + 'px';
                if (e.offsetWidth < 200) {
                    this.$refs['rightEvents_' + this.data.value].style.left = 2 * e.offsetWidth / 5 + 'px';
                }
                this.showRight = true;
            },
            // 关闭菜单
            hideRight() {
                this.showRight = false;
            },
            // 指定or取消置顶
            setTopChat() {
                let taskId = new Date().getTime() * 10000 + parseInt(Math.random() * 10000);
                let msgs = {
                    MsgType: 'ChatRoomActionTask',
                    Content: {
                        WeChatId: this.selectItem.wechatid,
                        ChatRoomId: this.selectItem.friendid,
                        Action: 16,
                        taskId: taskId,
                        IntValue: this.data.top_type === 0 ? 0 : 1,
                    }
                };
                this.$websocket.sendSock(msgs);

                this.showRight = false;
            },
            // 选择会话
            selectFriend(item) {
                this.$emit('clickwx', item);
                this.active = item.id;
                this.showRight = false;
            },
            initData() {
                this.page = 1;
            },
        },
    };
</script>

<style lang="less" scoped>
.virtual-list .container {
    overflow: auto;
}

.active {
    color: #2b85e4;
    font-weight: bold;
    /* width: 100%;
    padding: 5px;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #eee; */
}
*::-webkit-scrollbar {
    width: 5px;
    /*对垂直流动条有效*/
    height: 5px;
    /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
*::-webkit-scrollbar-thumb {
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #ccc;
    background-color: #eee;
}

/* 定义两端按钮的样式
*::-webkit-scrollbar-button {
    background-color: cyan;
} */

/*定义右下角汇合处的样式*/
*::-webkit-scrollbar-corner {
    background: khaki;
}
.icon{
    cursor: pointer;
}
.ivu-ellipsis{
    line-height: 40px;
}
#rightEvents {
    // width: 100px;
    padding: 5px 15px;
    position: absolute;
    background:rgb(88, 94, 107);
    color: #fff;
    z-index: 10;
    cursor: pointer;
    border-radius: 5px;
    .del-tab {
        text-align: center;
        font-size: 12px;
        // height: 20px;
        // line-height: 20px;
        &:hover {
            //background: rgba($color: white, $alpha: 0.9);
            color: #fff;
        }
    }
}
#rightEvents:hover{
    box-shadow:1px 2px 4px rgb(173, 173, 173);
}
.demo-badge{
    background: #eee;
    border-radius: 6px;
    display: inline-block;
}
.avatar {
    height: 38px;
    width: 38px;
    border-radius: 10px;
}
</style>
